<template>
  <div class="treeDom">
    <div class="demoscroll">
      <el-tree
        :data="$store.state.treeData"
        default-expand-all
        accordion
        node-key="node_id"
        @node-click="handleNodeClick"
        ref="tree"
      >
        <template slot-scope="{ node, data }">
          <span>
            <i
              v-show="!data.children"
              :class="data.nvr_state == 1 ? 'state' : 'statef'"
              class="iconfont"
              >&#xe631;</i
            >
            {{ &nbsp; data.title }}
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script>
// import { queryTree } from "@/http";
export default {
  name: "Tree",
  data() {
    return {
      // treeData: [],
      // treePromise: null,
      // pictLoading: false, //树状图加载
    };
  },
  created() {
    // this.pictLoading = true;
    // this.treePromise = new Promise((resolve) => {
    //   queryTree().then((res) => {
    //     this.treeData = res.data;
    //     this.pictLoading = false;
    //     resolve(res);
    //     if (res != "未认证") {
    //       setTimeout(() => {
    //         this.querTree();
    //       }, 1000 * 60 * 6);
    //     }
    //   });
    // });
  },
  mounted() {},
  watch: {},
  methods: {
    handleNodeClick(node, data) {
      this.$emit("change-video", node);
      this.$emit("change-video2", data, node);
    },
    // querTree() {
    //   queryTree().then((res) => {
    //     console.log(res);
    //     this.treeData = res.data;
    //     if (res.result_code == 200) {
    //       setTimeout(() => {
    //         this.querTree();
    //         // this.$store.commit("setTreeUpdate");
    //       }, 1000 * 60);
    //     }
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.treeDom {
  .demoscroll {
    width: 106%;
    height: 102%;
    overflow: scroll;
  }
}
.el-tree {
  background: none;
  color: white;
}
.state {
  color: #1ab394;
}
.statef {
  color: #aaa;
}
</style>
